<template>
  <codemirror
    v-model="code"
    class="code"
    :options="cmOptions"
    @input="changeInput"
  />
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/keymap/sublime";
import "codemirror/theme/dracula.css";
import "codemirror/mode/vue/vue.js";
import "codemirror/addon/selection/active-line";
import "./yara/yara";

export default {
  name: "CodeMirror",
  components: {
    codemirror
  },
  model: {
    prop: "code", // 默认是value
    event: "input" // 默认是input
  },
  props: {
    code: [String]
  },

  data() {
    return {
      cmOptions: {
        tabSize: 4,
        theme: "dracula",
        lineNumbers: true,
        lineWrapping: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: "yara",
        readOnly: false
      }
    };
  },
  methods: {
    changeInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style scoped>
.code {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
<style>
.CodeMirror {
  height: 100%;
}
</style>
